<template>
	<div class="collectionManagement navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />

		<transition name="fold-right-effect">
			<div class="cm_list_content" v-if="status == 0">
				<div class="add_cm" @click="status = 1">
					<span>添加我的收款方式</span>
					<img src="../../assets/user/add_cm.png" alt="">
				</div>
				<van-collapse v-model="activeName" accordion>
					<van-collapse-item :name="(index+1)" v-for="item,index in bank_list">
						<template #title>
							<div v-if="item.sk_type == 'alipay'" class="vci_item">
								<img src="../../assets/user/zfb.png" alt="">
								<span>支付宝</span>
							</div>
							<div v-if="item.sk_type == 'wechat'" class="vci_item">
								<img src="../../assets/user/wx.png" alt="">
								<span>微信</span>
							</div>
							<div v-if="item.sk_type == 'bank'" class="vci_item">
								<img src="../../assets/user/yhk.png" alt="">
								<span>银行卡</span>
							</div>
						</template>

						<!-- 银行卡修改 -->
						<div class="bind_info" v-if="item.sk_type == 'bank'">
							<div>
								<p>账户名：{{item.sk_realname}}</p>
								<button @click="selectChange(item.sk_type,item)">修改</button>
							</div>
							<p>开户银行：{{item.sk_bank_name}}</p>
							<p>银行卡卡号：{{item.sk_nums}}</p>
						</div>

						<!-- 支付宝修改 -->
						<div class="bind_info" v-if="item.sk_type == 'alipay'">
							<div>
								<p>支付宝账号：{{item.sk_nums}}</p>
								<button @click="selectChange(item.sk_type,item)">修改</button>
							</div>
							<p class="skm">收款码：<img :src=" 'http://www.facai888008.cn/' + item.sk_pic" alt=""></p>
						</div>

						<!-- 微信修改 -->
						<div class="bind_info" v-if="item.sk_type == 'wechat'">
							<div>
								<p>微信号：{{item.sk_nums}}</p>
								<button @click="selectChange(item.sk_type,item)">修改</button>
							</div>
							<p class="skm">收款码：<img :src=" 'http://www.facai888008.cn/' + item.sk_pic" alt=""></p>
						</div>
					</van-collapse-item>

				</van-collapse>

				<div v-if="bank_list == '' && bank_list != null" style="text-align: center;padding-top: 2rem;">
					<van-loading size="24px">加载中...</van-loading>
				</div>

				<div v-if="bank_list == null" style="text-align: center;padding-top: 2rem;">
					<div style="font-size: .28rem;color: rgba(255,255,255,.5);">暂无绑定记录...</div>
				</div>
			</div>
		</transition>

		<transition name="fold-left-effect">
			<div class="cm_add_content" v-if="status == 1">
				<div class="add_cm">
					<span @click="status = 0">返回收款方式列表</span>
				</div>

				<div class="add_item" @click="showPicker = true">
					<div>
						收款账户：
						<span style="width: 2.2rem;margin-left: .4rem;">{{type}}</span>
					</div>
					<img src="../../assets/user/go.png" alt="">
				</div>

				<!-- 支付宝收款 -->
				<div v-if="type_index == 0">
					<div class="add_item">
						<div>
							<span>真实姓名</span>
							<input v-model="post_data.user_realname" placeholder="请输入真实姓名" type="text">
						</div>
					</div>
					<div class="add_item">
						<div>
							<span>支付宝号</span>
							<input v-model="post_data.sk_nums" placeholder="请输入支付宝账号" type="text">
						</div>
					</div>

					<div class="add_item upload_skm">
						<div>
							<span>收款码：</span>
						</div>
						<div class="upload_div">
							<div v-if="!post_data.codeimg">
								<img src="../../assets/user/add_cm.png" alt="">
								<p>添加</p>
							</div>

							<img class="zs_img" v-if="post_data.codeimg" :src=" 'http://www.facai888008.cn/' + post_data.codeimg" alt="">

							<input accept="image/*" @change="upload($event)" type="file">
						</div>
					</div>
				</div>

				<!-- 微信收款 -->
				<div v-if="type_index == 1">
					<div class="add_item">
						<div>
							<span>真实姓名</span>
							<input v-model="post_data.user_realname" placeholder="请输入真实姓名" type="text">
						</div>
					</div>
					<div class="add_item">
						<div>
							<span>微信号</span>
							<input v-model="post_data.sk_nums" placeholder="请输入微信账号" type="text">
						</div>
					</div>

					<div class="add_item upload_skm">
						<div>
							<span>收款码：</span>
						</div>
						<div class="upload_div">
							<div v-if="!post_data.codeimg">
								<img src="../../assets/user/add_cm.png" alt="">
								<p>添加</p>
							</div>

							<img class="zs_img" v-if="post_data.codeimg" :src=" 'http://www.facai888008.cn/' + post_data.codeimg" alt="">

							<input accept="image/*" @change="upload($event)" type="file">
						</div>
					</div>
				</div>

				<!-- 银行卡收款 -->
				<div v-if="type_index == 2">
					<div class="add_item">
						<div>
							<span>账户名</span>
							<input v-model="post_data.user_realname" placeholder="请输入银行卡开户人姓名" type="text">
						</div>
					</div>
					<div class="add_item">
						<div>
							<span>开户银行</span>
							<input v-model="post_data.whobank" placeholder="请输入开户银行名称" type="text">
						</div>
					</div>
					<div class="add_item">
						<div>
							<span>银行卡号</span>
							<input v-model="post_data.sk_nums" placeholder="请输入银行卡号" type="text">
						</div>
					</div>
					<div class="add_item">
						<div>
							<span>开户地址</span>
							<input v-model="post_data.sk_bank_address" placeholder="开户行地址" type="text">
						</div>
					</div>

				</div>

				<button class="confirm_add" @click="confirm" v-if="change_id == ''">确认添加</button>
				<button class="confirm_add" @click="changeCM" v-if="change_id != ''">确认修改</button>
			</div>
		</transition>

		<van-popup v-model="showPicker" position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" :default-index="type_index" @confirm="onConfirm" />
		</van-popup>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Collapse,
		CollapseItem,
		Picker
	} from 'vant';

	Vue.use(Collapse);
	Vue.use(CollapseItem);
	Vue.use(Picker);
	export default {
		name: "collectionManagement",
		created() {

			this.getbankList()

		},
		data() {
			return {

				change_id: "",

				//银行卡列表
				bank_list: "",

				// 0收款方式展示    1添加收款页面
				status: 0,

				//pink选择列表
				columns: ['支付宝', '微信', '银行卡'],

				// 银行卡类别选择下标
				activeName: '0',

				showPicker: false,

				type: "支付宝",

				//type0 支付宝   type1微信   type2银行卡
				type_index: 0,

				post_data: {
					// 真实姓名
					user_realname: "",
					// 账户名
					sk_nums: "",
					//开户行
					whobank: "",
					// 收款二维码
					codeimg: "",
					// 类别
					type: "alipay",
					// 开户行地址
					sk_bank_address: ""
				}
			}
		},
		methods: {
			// 修改
			selectChange(type, item) {

				this.change_id = item.sk_id
				this.post_data.user_realname = item.sk_realname
				this.post_data.sk_nums = item.sk_nums
				this.post_data.whobank = item.sk_bank_name
				this.post_data.codeimg = item.sk_pic
				this.post_data.type = type
				this.post_data.sk_bank_address = item.sk_bank_address

				if (type == "alipay") {

					this.activeName = '0'
					this.type_index = 0
					this.type = "支付宝"

				} else if (type == "wechat") {

					this.activeName = '1'
					this.type_index = 1
					this.type = "微信"

				} else if (type == "bank") {

					this.activeName = '2'
					this.type_index = 2
					this.type = "银行卡"

				}

				this.status = 1
			},
			// 上传图片
			async upload(e) {

				this.$toast.loading({
					message: '上传中...',
					forbidClick: true,
					duration: 0
				});

				let img = e.target.files[0]

				let post_data = new FormData()

				post_data.append("file", img)

				try {

					const data = await this.$apis.User.uploadImg(post_data)

					this.$toast.success(data.msg)

					this.post_data.codeimg = data.info

					// console.log(data)

				} catch (e) {
					//TODO handle the exception


					this.$toast.fail(e.msg)
				}


			},
			// 确认绑定
			async confirm() {

				if(this.type_index == 2){
					
					if(this.post_data.user_realname.trim().length < 2 || this.post_data.user_realname.trim().length > 12) return this.$toast("请填写正确的开户姓名");
					
					if(this.post_data.whobank.trim().length < 2 || this.post_data.whobank.trim().length > 12) return this.$toast("请填写正确的开户行");
					
					if(this.post_data.sk_nums.trim().length < 16 || this.post_data.sk_nums.trim().length > 19) return this.$toast("请填写正确的银行卡卡号");
					
					if(this.post_data.sk_bank_address.trim().length < 2 || this.post_data.sk_bank_address.trim().length > 18) return this.$toast("请填写正确的开户地址");
					
				}else{
					
					if(this.post_data.user_realname.trim().length < 2 || this.post_data.user_realname.trim().length > 12) return this.$toast("请填写正确的真实姓名");
					
					if(this.post_data.sk_nums.trim().length < 2 || this.post_data.user_realname.trim().length > 32) return this.$toast("请填写正确的账号");
					
					if(this.post_data.codeimg == "") return this.$toast("请上传收款二维码");
					
				}

				try {

					const data = await this.$apis.User.addbank(this.post_data)

					this.$toast(data.msg)

				} catch (e) {
					
					this.$toast(e.msg)
					
					//TODO handle the exception
				}

			},
			//修改收款信息
			async changeCM(){
				
				this.post_data.id = this.change_id
				
				if(this.type_index == 2){
					
					if(this.post_data.user_realname.trim().length < 2 || this.post_data.user_realname.trim().length > 12) return this.$toast("请填写正确的开户姓名");
					
					if(this.post_data.whobank.trim().length < 2 || this.post_data.whobank.trim().length > 12) return this.$toast("请填写正确的开户行");
					
					if(this.post_data.sk_nums.trim().length < 16 || this.post_data.sk_nums.trim().length > 19) return this.$toast("请填写正确的银行卡卡号");
					
					if(this.post_data.sk_bank_address.trim().length < 2 || this.post_data.sk_bank_address.trim().length > 18) return this.$toast("请填写正确的开户地址");
					
				}else{
					
					if(this.post_data.user_realname.trim().length < 2 || this.post_data.user_realname.trim().length > 12) return this.$toast("请填写正确的真实姓名");
					
					if(this.post_data.sk_nums.trim().length < 2 || this.post_data.user_realname.trim().length > 32) return this.$toast("请填写正确的账号");
					
					if(this.post_data.codeimg == "") return this.$toast("请上传收款二维码");
					
				}
				
				try{
					
					const data = await this.$apis.User.editbank(this.post_data)
					
					this.$toast(data.msg)
					
					this.getbankList()
					
					setTimeout( ()=>{
						this.status = 0
					},1000)
					
				}catch(e){
					
					this.$toast(e.msg)
					//TODO handle the exception
				}
				
			},

			// 获取银行卡列表
			async getbankList() {

				try {

					const data = await this.$apis.User.banklist()

					data.data.length <= 0 ? this.bank_list = null : this.bank_list = data.data

				} catch (e) {

					this.bank_list = null
					//TODO handle the exception
				}
			},

			// pick选择
			onConfirm(value) {

				this.post_data = {
					// 真实姓名
					user_realname: "",
					// 账户名
					sk_nums: "",
					//开户行
					whobank: "",
					// 收款二维码
					codeimg: "",
					// 开户行地址
					sk_bank_address: ""
				}
				
				console.log(value)
				this.type = value

				this.type_index = this.columns.indexOf(value)

				this.type_index == 0 ? this.post_data.type = "alipay" : this.type_index == 1 ? this.post_data.type = "wechat" : this.post_data.type = "bank"

				this.showPicker = false;
				
				this.change_id = ""

			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	@import '../../style/transition.less';

	.collectionManagement {

		.confirm_add {
			margin: auto;
			margin-top: .92rem;
			font-size: .28rem;
			border: none;
			outline: none;
			width: 6rem;
			height: .72rem;
			background: rgba(17, 34, 58, 1);
			box-shadow: inset 0px 0px .3rem 0px rgba(28, 176, 212, 1);
			border-radius: .2rem;
			display: block;
		}

		.cm_list_content,
		.cm_add_content {
			position: absolute;
			width: 100%;
		}

		.cm_list_content {
			.bind_info {
				color: #8FE2F8;
				font-size: .28rem;
				padding-left: .9rem;
				padding-right: .5rem;
				box-sizing: border-box;

				>div:nth-child(1) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: .26rem;

					p {
						margin: 0;
					}
				}

				p {
					margin-bottom: .26rem;
				}

				p:last-child {
					margin: 0;
				}

				button {
					width: 1rem;
					height: .3rem;
					background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
					border-radius: .1rem;
					background-color: transparent;
					border: none;
					outline: none;
					color: #333;
					line-height: .3rem;
				}

				.skm {
					display: flex;
					align-items: flex-start;
				}

				img {
					width: 1.5rem;
					height: 1.5rem;
					margin-left: .12rem;
				}
			}

			.add_cm {
				color: #8FE2F8;
				padding: .36rem;
				box-sizing: border-box;
				font-size: .3rem;
				display: flex;
				align-items: center;

				img {
					width: .3rem;
					height: .3rem;
					margin-left: .17rem;
				}
			}
		}

		.cm_add_content {
			color: #8FE2F8;

			.add_cm,
			.add_item {
				padding: .36rem;
				box-sizing: border-box;
			}

			.add_cm {
				font-size: .3rem;
				display: flex;
				align-items: center;

				img {
					width: .3rem;
					height: .3rem;
					margin-left: .17rem;
				}
			}

			.add_item {
				border-top: 1px solid #1A304F;
				font-size: .28rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				>div:nth-child(1) {
					display: flex;
					align-items: center;

					span {
						display: block;
						width: 1.2rem;
					}
				}

				input {
					border: none;
					outline: none;
					margin-left: .58rem;
				}

				input::placeholder {
					color: #3A627E;
				}
			}

			.upload_skm {
				align-items: flex-start;
				justify-content: start;

				.upload_div {
					position: relative;
					margin-left: .57rem;
					width: 1.5rem;
					height: 1.5rem;
					background-color: #165F7C;
					font-size: .22rem;

					div {
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						img {
							width: .3rem;
							height: .3rem;
						}

						p {
							margin-top: .08rem;
						}
					}

					input {
						margin: 0;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}

					.zs_img {
						object-fit: cover;
						width: 100%;
						height: 100%;
					}
				}
			}
		}


		.vci_item {
			display: flex;
			align-items: center;
			color: #8FE2F8;
			font-size: .28rem;

			img {
				margin-right: .24rem;
			}
		}

		/deep/ .van-cell {
			background-color: transparent;
			border-bottom: 1px solid rgba(255, 255, 255, .1);
		}

		/deep/ .van-collapse-item--border::after {
			border-top: none;
		}

		/deep/ .van-cell::after {
			border: none;
		}

		/deep/ .van-collapse-item__content {
			background-color: rgba(255, 255, 255, 0.05);
		}

		// /deep/ .van-collapse-item__title .van-cell__right-icon::before{
		// 	transform: rotate(0deg);
		// }
	}
</style>
